<template>
    <div>
        <xx-table v-loading="loading" :showDefalutButton="false" :showDefalutExpand="false" :showDefalutTools="false" :tableData="tableData">
            <!-- 自定义插槽 -->
            <template v-slot:birthdayTime="slotProps">
                <div v-if="slotProps.item.birthdayTime > 30">
                    {{slotProps.item.birthdayTime}}天
                </div>
                <div v-else style="color: green;font-weight: 900;background-color: bisque;">
                    {{slotProps.item.birthdayTime}}天
                </div>
            </template>
        </xx-table>
    </div>
</template>

<script>
import XxTable from '../../components/XxTable.vue'
export default {
    components: { XxTable },
    data() {
        return {
            loading: true,
            tableData: {
                pages: 1,
                header: [
                    {
                        label: '姓名',
                        width: '',
                        prop: 'name'
                    },
                    {
                        label: '手机',
                        width: '',
                        prop: 'mobile'
                    },
                    {
                        label: '微信',
                        width: '',
                        prop: 'wechatId'
                    },
                    {
                        label: 'QQ',
                        width: '',
                        prop: 'qqNum'
                    },
                    {
                        label: '城市',
                        width: '',
                        prop: 'cityName'
                    },
                    {
                        label: '生日',
                        width: '',
                        prop: 'birthdayStr'
                    },
                    {
                        label: '剩余',
                        width: '',
                        prop: 'birthdayTime',
                        type: 'no-editslot'
                    }
                ],
                data: []
            }

        }
    },
    computed: {},
    async mounted() {
        const res = await this.getMemberList()
        console.log(res)
        this.tableData.data = res.listData
        this.loading = false
    },
    methods: {
        getbirthdayTime(date) {
            date = new Date(date)
            const now = new Date()
            date.setFullYear(now.getFullYear())
            if (date < now) {
                date.setFullYear(now.getFullYear() + 1)
            }
            const timeDec = date - now
            const days = timeDec / (24 * 60 * 60 * 1000)
            return Math.ceil(days)
        },
        async getMemberList() {
            const res = await fetch('https://tuanapi.12355.net/api/v1/admin/members/page', {
                headers: {
                    accept: 'application/json, text/javascript, */*; q=0.01',
                    'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6',
                    authorize_name: this.$store.state.oid,
                    'cache-control': 'no-cache',
                    'content-type': 'application/json',
                    pragma: 'no-cache',
                    'sec-ch-ua': '"Chromium";v="92", " Not A;Brand";v="99", "Microsoft Edge";v="92"',
                    'sec-ch-ua-mobile': '?0',
                    'sec-fetch-dest': 'empty',
                    'sec-fetch-mode': 'cors',
                    'sec-fetch-site': 'same-site',
                    Cookie: this.$store.state.cookie
                },
                referrer: 'https://tuan.12355.net/',
                referrerPolicy: 'strict-origin-when-cross-origin',
                body: '{"name":"","auditStatus":"","rewardStatus":"","deletedState":"","mobile":"","disabled":"","developmentMemberNumber":"","leagueForYears":"","volunteerServiceHoursForYear":"","page":1,"pageSize":100}',
                method: 'POST',
                mode: 'cors',
                credentials: 'include'
            })

            const temp = await res.json()
            for (const iterator of temp.listData) {
                iterator.birthdayTime = this.getbirthdayTime(iterator.birthdayStr)
            }
            return temp
        }
    }
}
</script>

<style
XxTable>

</style>
